// 我的试卷页面
<template>
  <div id="myExam">
    <div class="title">我的试卷</div>
    <div class="wrapper">
      <ul class="top">
        <li class="order">试卷列表</li>
        <li class="search-li"><div class="icon"><input type="text" placeholder="试卷名称" class="search" v-model="key"><i class="el-icon-search"></i></div></li>
        <li><el-button type="primary" @click="search()">搜索试卷</el-button></li>
      </ul>
      <ul class="paper" v-loading="loading">
        <li class="item" v-for="(item,index) in pagination.list" :key="index">
          <h4 @click="toExamMsg(item.examPaper,item.id)" v-if="item.isExam == 0">{{item.examPaperName}}</h4>
          <p class="name">{{item.examPaperName}}-{{item.examEname}}</p>
          <div class="info">
            <i class="el-icon-edit"></i><span>{{item.examTime}}</span>
            <i class="iconfont icon-icon-time"></i><span>限时{{item.examAnserTime}}分钟</span>
            <i class="el-icon-info"></i><span >{{item.isExam}}</span><!--是否考试,0未考,1已考-->
            <!-- <i class="iconfont icon-fenshu"></i><span>满分{{item.totalScore}}分</span> -->
          </div>
        </li>
      </ul>
      
    <pagination v-bind:child-msg="pageparm" @callFather="callFather"></pagination>
    </div>
  </div>
</template>

<script>
import pagination from '../common/pagination.vue';
export default {
  // name: 'myExam'
  components: { pagination },
  data() {
    return {
      loading: false,
      key: null, //搜索关键字
      allExam: null, //所有考试信息
      pagination: [],//列表信息
      id:'',//用户id
      user:'',//用户信息
      input:'',//搜索框输入内容
      //分页参数
      pageparm:{
        currentPage: 1,
        pageSize: 6,
        total: 20
      },
      formInline: {
        name:"",
        status:"",
        page: 1,
        limit: 5,
      },
    }
  },
  created() {
    this.loading = true
    this.getUserid()
    this.getExamInfo()
  },
  // watch: {
    
  // },
  methods: {
    //时间戳处理
    timestampToTime(cjsj) {
      var date = new Date(cjsj); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
      var Y = date.getFullYear() + "-";
      var M =
        (date.getMonth() + 1 < 10
          ? "0" + (date.getMonth() + 1)
          : date.getMonth() + 1) + "-";
      var D = date.getDate() + " ";
      var h = date.getHours() + ":";
      var m = date.getMinutes() + ":";
      var s = date.getSeconds();
      return Y + M + D + h + m + s;
    },
    //获取用户id
    getUserid(){
     // this.id = JSON.parse(window.localStorage.getItem('userdata').e_id)
      this.user = JSON.parse(localStorage.getItem('userdata'))
      this.id=this.user.eId
      console.log("this.id",this.id);
    },
    //获取当前所有考试信息
    getExamInfo() {
      console.log("getid",this.id);
      this.$axios.get('/api/examMenu/findAllpaper/'+ this.pageparm.currentPage+'/'+this.pageparm.pageSize + '/' + this.id).then(res => {
        for (let i = 0; i < res.data.data.list.length; i++) {
            let time = res.data.data.list[i].examTime;
            //console.log("time",time);
            //console.log("bbb",this.timestampToTime(time));
            res.data.data.list[i].examTime = this.timestampToTime(time);
          }
        this.pagination = res.data.data
        this.loading = false
        console.log("jlll",this.pagination)
        // 分页赋值
        this.pageparm.currentPage = this.formInline.page
        this.pageparm.pageSize = this.formInline.limit
        this.pageparm.total = res.data.data.total
      }).catch(error => {
        console.log(error)
      })
     
    },
    //分页插件
    callFather(parm) {
      this.formInline.page = parm.currentPage;
      this.formInline.limit = parm.pageSize;
      this.pageparm.currentPage = this.formInline.page;
      this.pageparm.pageSize = this.formInline.limit;
      // console.log(this.question);
      this.selectByType();
    },

    //判断切换页码时，是什么查询法
    selectByType() {
      if (this.key) {
        this.search();
      } else {
        this.getExamInfo();
      }
    },
    //搜索试卷
    search() {
      //console.log("key:",this.key);
      let str = this.key
      console.log("当前页",this.pageparm.currentPage);
      let page = this.pageparm.currentPage
      // if(page == null){
      //   page = 1
      // }
      this.$axios({
        url:"/api/examMenu/findAllpaperBySearch/"+ page + '/' + this.id,
        method:'post',
        data:{
          str
        },
        header:{
          'Content-Type': 'text/html; charset=utf-8'
        },
      }).then(res => {
        if(res.data.code == 200) {
          for (let i = 0; i < res.data.data.list.length; i++) {
            let time = res.data.data.list[i].examTime;
            // console.log("time",time);
            // console.log("bbb",this.timestampToTime(time));
            res.data.data.list[i].examTime = this.timestampToTime(time);
          }
          this.pagination = res.data.data
          console.log("thispaper",this.pagination);
          // 分页赋值
          this.pageparm.currentPage = this.formInline.page;
          this.pageparm.pageSize = this.formInline.limit;
          this.pageparm.total = res.data.data.total;
          // let newPage = allExam.filter(item => {
          //   return item.list.includes(this.key)
          // })
          // this.pagination.records = newPage
        }
      })
    },
    //跳转到试卷详情页
    toExamMsg(examCode,id) {
      this.$router.push({path: '/answer', query: {examCode: examCode,id:id}})
      console.log(examCode)
    }
  }
}
</script>

<style lang="scss" scoped>
.pagination {
  padding: 20px 0px 30px 0px;
  .el-pagination {
    display: flex;
    justify-content: center;
  }
}
.paper {
  h4 {
    cursor: pointer;
  }
}
.paper .item a {
  color: #000;
}
.wrapper .top .order {
  cursor: pointer;
}
.wrapper .top .order:hover {
  color: #0195ff;
  border-bottom: 2px solid #0195ff;
}
.wrapper .top .order:visited {
  color: #0195ff;
  border-bottom: 2px solid #0195ff;
}
.item .info i {
  margin-right: 5px;
  color: #0195ff;
}
.item .info span {
  margin-right: 14px;
}
.paper .item {
  width: 380px;
  border-radius: 4px;
  padding: 20px 30px;
  border: 1px solid #eee;
  box-shadow: 0 0 4px 2px rgba(217,222,234,0.3);
  transition: all 0.6s ease;
}
.paper .item:hover {
  box-shadow: 0 0 4px 2px rgba(140, 193, 248, 0.45);
  transform: scale(1.03);
}
.paper .item .info {
  font-size: 14px;
  color: #88949b;
}
.paper .item .name {
  font-size: 14px;
  color: #88949b;
}
.paper * {
  margin: 20px 0;
}
.wrapper .paper {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
}
.top .el-icon-search {
  position: absolute;
  right: 10px;
  top: 10px;
}
.top .icon {
  position: relative;
}
.wrapper .top {
  border-bottom: 1px solid #eee;
  margin-bottom: 20px;
}
#myExam .search-li {
  margin-left: auto;
}
.top .search-li {
  margin-left: auto;
}
.top li {
  display: flex;
  align-items: center;
}
.top .search {
  margin-left: auto;
  padding: 10px;
  border-radius: 4px;
  border: 1px solid #eee;
  box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
  transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
}
.top .search:hover {
  color: #0195ff;
  border-color: #0195ff;
}
.wrapper .top {
  display: flex;
}
.wrapper .top li {
  margin: 20px;
}
#myExam {
  width: 980px;
  margin: 0 auto;
}
#myExam .title {
  margin: 20px;
}
#myExam .wrapper {
  background-color: #fff;
}
</style>
